import Taro, { useState, useEffect }  from '@tarojs/taro'
import { View, Image, Text } from '@tarojs/components'
import {AtIcon} from "taro-ui";
import _get from 'lodash/get'

// utils
import getLoginInfo from "../../utils/getLoginInfo"
import getAvatarImgPrefix from "../../utils/getAvatarImgPrefix";

// global
import {REALNAME, READ1000_USER_INFO, set} from '../../globalData';


// style
import './index.scss'

export default function UCenter() {
  const [user, setUser] = useState({})
  const [avatar, setAvatar] = useState('')
  const [isVIP, setIsVIP] = useState(false)

  useEffect(() => {
    const userData = getLoginInfo()
    if(userData) {
      setUser(userData)
    }
  }, [])

  useEffect(() => {
    const url = _get(user, ['user', 'avatar_url'])
    setAvatar(url ? getAvatarImgPrefix(url) : require('../../assets/180x180defalut_avatar@2x.png'))

    const groups = _get(user, ['user', 'groupRoles'])
    let flag = isVIP

    if(groups) {
      groups.map(item => {
        const group_name = _get(item, ['group', 'group_name'])
        console.log(group_name)
        if (group_name === 'VIP') {
          flag = true
        }
      })

      setIsVIP(flag)

    }

  }, [user])

  function go(url) {
    console.log(url)
    Taro.navigateTo({
      url,
    })
  }

  async function logout() {
    set(READ1000_USER_INFO, undefined)
    set(REALNAME, undefined)
    await  Taro.setStorageSync(READ1000_USER_INFO, undefined)
    await  Taro.setStorageSync(REALNAME, undefined)
    Taro.redirectTo({
      url: `/pages/login/index`
    })
  }

  return (
    <View className='uCenter-page'>
      <View className='user-info-container'>
        <View className='avatar-container'>
          <Image src={avatar} className='avatar' />
          {
            isVIP && (
              <Image className='vip' src={require('../../assets/VIP32x32@2x.png')} />
            )
          }
        </View>
        <View className='nickname'>
          {
            _get(user, ['user', 'nickname'])
          }
        </View>
      </View>

      <View className='entry-container'>
        <View className='entry' onClick={() => go(`/pages/history/index`)}>
          <View className='go'>
            <Image className='icon'  src={require('../../assets/uc_history48X48@2x.png')}   />
            <Text className='text'>阅读记录</Text>
          </View>

          <AtIcon value='chevron-right' size='20' color='#cecece' />
        </View>

        <View className='entry' onClick={() => go(`/pages/recordingList/index`)}>
          <View className='go'>
            <Image className='icon'  src={require('../../assets/uc_recording48X48@2x.png')}   />
            <Text className='text'>配音记录</Text>
          </View>

          <AtIcon value='chevron-right' size='20' color='#cecece' />
        </View>

        <View className='entry' onClick={() => go(`/pages/withdrawRecord/index`)}>
          <View className='go'>
            <Image className='icon'  src={require('../../assets/uc_record48X48@2x.png')}   />
            <Text className='text'>提现记录</Text>
          </View>

          <AtIcon value='chevron-right' size='20' color='#cecece' />
        </View>
      </View>

      <View className='entry-container'>
        <View className='entry' onClick={() => logout()}>
          <View className='go'>
            <Image className='icon'  src={require('../../assets/logout48X48@2x.png')}   />
            <Text className='text'>退出登录</Text>
          </View>

          <AtIcon value='chevron-right' size='20' color='#cecece' />
        </View>
      </View>
    </View>
  )
}

UCenter.config = {
  navigationBarTitleText: '个人中心',
}
